<template>
  <div>
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item v-for="(item, index) in banner" :key="index">
        <img v-lazy="item" @click="swiperImgClick(index)" />
      </van-swipe-item>
    </van-swipe>
  </div>
</template>

<script>
import { ImagePreview } from "vant";
export default {
  name: "VantDetailSwipe",

  data() {
    return {
      swiperData: [
        "https://img-blog.csdnimg.cn/4f885cb030394053bca6dbd1397192ac.jpg?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA6Z2S6Zizemk=,size_20,color_FFFFFF,t_70,g_se,x_16",
        "https://img-blog.csdnimg.cn/ea89f1a3719748e9acbaff42b18e3dae.jpg?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA6Z2S6Zizemk=,size_20,color_FFFFFF,t_70,g_se,x_16",
        "https://img-blog.csdnimg.cn/40146db4ee704350abf67924e740d0b3.jpg?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA6Z2S6Zizemk=,size_20,color_FFFFFF,t_70,g_se,x_16",
        "https://img-blog.csdnimg.cn/7e67a0a17a3a41f69040642e41ed4ae2.jpg?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA6Z2S6Zizemk=,size_20,color_FFFFFF,t_70,g_se,x_16",
      ],
    };
  },

  mounted() {},
  props: {
    banner: {
      type: Array,
    },
  },
  methods: {
    swiperImgClick(index) {
      ImagePreview({
        images: this.swiperData,
        showIndex: true,
        loop: false,
        startPosition: index,
      });
      console.log(index);
    },
  },
};
</script>

<style  scoped>
img {
  width: 100%;
  height: 350px;
}
</style>